<template>
  <div class="page">
    <div class="w3layouts-main">
      <div class="bg-layer">
      <div class="title-line">
        <span class="tit" style="font-size: 38px;">注册</span>
      </div>
          <div class="signUp-container">
            <div id="signUp-form">
              <Form ref="signUpFormData" :model="signUpFormData" :rules="ruleValidate">
                <FormItem  prop="userName">
                  <Input prefix="ios-contact" v-model="signUpFormData.userName" placeholder="用户名" size="large" clearable style="width: 400px;margin-top: 20px;" />
                </FormItem>
                <FormItem  prop="mobile">
                  <Input prefix="ios-call" v-model="signUpFormData.mobile" placeholder="手机号" size="large" clearable style="width: 400px;margin-top: 20px;" />
                </FormItem>
                <FormItem  prop="email">
                  <Input prefix="ios-mail" v-model="signUpFormData.email" placeholder="邮箱" size="large" clearable style="width: 400px;margin-top: 20px;" />
                </FormItem>
                <FormItem  prop="password">
                  <Input prefix="ios-lock" v-model="signUpFormData.password" type="password" password placeholder="密码" size="large" clearable style="width: 400px;margin-top: 20px;" />
                </FormItem>
                <FormItem  prop="verifyPass">
                  <Input prefix="ios-lock" v-model="signUpFormData.verifyPass" type="password" password placeholder="再次确认密码" size="large" clearable style="width: 400px;margin-top: 20px;" />
                </FormItem>
                <Button type="primary" size="large" style="width: 150px;margin-top: 20px;" @click="handleSubmit('signUpFormData')">注册</Button>
                <Button @click="handleReset('signUpFormData')" type="primary" size="large" style="width: 150px;margin-top: 20px;">重置</Button>
                <a @click="toLoginPage" style="display: block;margin-top: 10px;color: white">已有帐号？立刻登录</a>
              </Form>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>



<script>
  import ManageService from '@/services/ManageService'
  import cookies from 'js-cookie'
  export default {
    name: "LoginComponent",
    data () {
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('密码不能为空'));
        } else {
          if (this.signUpFormData.verifyPass !== '') {
            // 对第二个密码框单独验证
            this.$refs.signUpFormData.validateField('verifyPass');
          }
          callback();
        }
      };
      const validatePassCheck = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次确认密码'));
        } else if (value !== this.signUpFormData.password) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      };
      return {
        signUpFormData: {
          userName: '',
          mobile:'',
          email:'',
          password: '',
          verifyPass:''
        },
        manageService:null ,
        ruleValidate: {
          userName: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '手机号不能为空', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' }
          ],
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          verifyPass: [
            { validator: validatePassCheck, trigger: 'blur' }
          ]
        }
      };
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        this.manageService = new ManageService(this);
      },
      signUp() {
        let params = {
          "userName": this.signUpFormData.userName,
          "mobile": this.signUpFormData.mobile,
          "email": this.signUpFormData.email,
          "password": this.signUpFormData.password,
          "verifyPassword": this.signUpFormData.verifyPass,
        };
        return {"isSuccess" : this.manageService.signUp(params).isSuccess}
      },
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.signUp();
          } else {
            console.log("请正确填写信息")
            this.$Message.error('请正确填写信息');
          }
        })
      },
      handleReset (name) {
        this.$refs[name].resetFields();
      },
      toLoginPage(){
        this.$router.push({path:'/login'})
      }
    }
  }
</script>


<style scoped>
  @import url("../assets/css/style.css");
  @import url("../assets/css/font-awesome.min.css");
  .page {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .title-line {
    width: 980px;
    height: 28px;
    margin: 0 auto;
    border-bottom: 1px solid #c5c5c5;
    margin-bottom: 28px;
    text-align: center;
    color: white;
    margin-top: 20px;
  }
  .title-line .tit {
    height: 56px;
    line-height: 56px;
    margin: 0 auto;
    padding: 0 20px;
    font-size: 40px;
    background-color: rgba(76,76,76,1);
    text-align: center;
  }
  .signUp-container {
    width: 450px;
    margin: 0 auto;
    padding: 60px 0;
    background-color: rgba(0,0,0,0.3);
    height: 500px;
    border-radius:20px
  }
  #signUp-form {
    text-align: center;
    width: 420px;
    margin: 0 auto;
    font-size: 12px;
    position: relative;
  }
</style>
